<template>
<div class="box-padding">
    <Row :gutter="60">
        <Col span="6">
        <Select v-model="parmes.whereMap.projectId"
            placeholder="请选择所属项目"
            @on-change="selectProject" clearable>
            <Option v-for="item in projectList" :value="item.id" :key="item.id">
                {{item.shortName}}
            </Option>
        </Select>
        </Col>
        <Col span="6">
        <Input v-model="parmes.whereMap.name" placeholder="请输入名称" clearable/>
        </Col>
        <Col span="6">
        <Select v-model="parmes.whereMap.riskType" ref="treeRiskType" placeholder="请选择风险类型" clearable>
            <Option v-for="item in treeRiskType" :value="item.id" :key="item.id" style="display: none;">{{ item.title }}</Option>
            <Tree :data="treeRiskTypeData" style="padding-left:20px" @on-select-change="checkData"></Tree>
        </Select>
        </Col>
        <Col span="6">
        <Select v-model="parmes.whereMap.distRiskGrade" clearable placeholder="请选择风险等级">
            <Option v-for="item in leveList" :value="item.code" :key="item.id">
                {{ item.name }}
            </Option>
        </Select>
        </Col>
    </Row>
    <Row :gutter="60">
        <Col span="6" style="height:10px;">
        </Col>
        <Col span="18" style="text-align:right;">
        <span class="search-title"></span>
        <Button type="primary"
            style="margin-right:20px;"
            v-if="searchButton"
            @click="searchWorkstationLedgerList">搜索</Button>
        <Button type="primary"
            style="margin-right:20px;"
            v-if="addButton"
            @click="addEditDetail('add')">新增</Button>
        <Button type="primary"
            style="margin-right:20px;"
            v-if="importButton"
            :to="{ name: 'workstation-ledger-import' }">导入</Button>
        <Button type="primary" @click="deleteBtn" v-if="delButton">删除</Button>
        <Button type="primary"
            style="margin-left:20px"
            v-if="setRiskTypeButton"
            @click="setRiskType"
            >批量设置风险类型</Button>
        </Col>
    </Row>
    <Table style="margin-top:20px;" border ref="selection" :columns="columns4" :data="data1" @on-selection-change="onSelect"></Table>
    <div class="page-div">
        <Page :total="total" :page-size="parmes.pageSize" class="tab-page" :page-size-opts='[10,20,50,100]' show-sizer show-elevator show-total @on-change="pageChange" @on-page-size-change="onPageSizeChange" />
    </div>
    <Modal v-model="modal2" width="360">
        <p slot="header" style="color:#333; text-align:center; border-bottom:none !important;">
            <span>删除提醒</span>
        </p>
        <div style="text-align:center;border:none !important;">确认要删除此项内容吗？</div>
        <div slot="footer" style="text-align:center;border:none !important;">
            <Button shape="circle" @click="modal2 = !modal2">取消</Button>
            <Button shape="circle" type="error" @click="removeClick">删除</Button>
        </div>
    </Modal>
    <Modal
        class="riskModal"
        v-model="riskTypeModal"
        title="批量设置风险类型">
        <Tree :data="treeRiskTypeData" style="padding-left:20px" @on-select-change="checkRiskTypeData"></Tree>
        <div slot="footer" style="text-align:center;border:none !important;">
            <Button @click="riskTypeModal = !riskTypeModal">取消</Button>
            <Button type="primary" @click="saveRiskType" style="margin-left:70px;">确定</Button>
        </div>
    </Modal>
</div>
</template>

<script>
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import crudMixin from '../../mixins/crudMixin'
export default {
    mixins: [crudMixin],
    components: {
        Treeselect
    },
    name: 'WorkstationLedger',
    data() {
        return {
            modal2: false,
            riskTypeModal:false,
            tableSelect: [],
            total: 0,
            parmes: {
                pageSize: 10,
                currentPage: 1,
                whereMap: {
                    name: '',
                    distEngineeringType: '',
                    distRiskGrade: '',
                    riskType: '',
                    projectId: '111111'
                }
            },
            value: '',
            list1: [],
            riskTypeList: [],
            treeRiskTypeData: [], //风险类型树
            treeRiskType:[],
            model1: '',
            addButton:false,//新增按钮
            searchButton:false,//搜索按钮
            editButton: false, //编辑按钮
            detailButton: false, //详情按钮
            delButton: false, //删除按钮
            importButton:false,//导入按钮
            setRiskTypeButton:false,//批量设置风险类型按钮
            buttonList: localStorage.getItem('buttonList'), //按钮权限
            columns4: [{
                    type: 'selection',
                    width: '60px',
                    align: 'center',
                    render: (h, params) => {}
                },
                {
                    title: '序号',
                    width: '80px',
                    align: 'center',
                    render: (h, params) => {
                        return h(
                            'span',
                            params.index +
                            (this.parmes.currentPage - 1) * this.parmes.pageSize +
                            1
                        )
                    }
                },
                {
                    title: '名称',
                    align: 'center',
                    key: 'name'
                },
                {
                    title: '风险等级',
                    align: 'center',
                    key: 'distRiskGradeName'
                },
                {
                    title: '风险类型',
                    align: 'center',
                    key: 'riskTypeName'
                },
                {
                    title: '开始时间',
                    align: 'center',
                    key: 'startTime',
                },
                {
                    title: '结束时间',
                    align: 'center',
                    key: 'endTime',
                },
                {
                    title: '操作',
                    align: 'center',
                    render: (h, params) => {
                        return h('div', [
                            h(
                                'Button', {
                                    props: {
                                        type: 'text',
                                        size: 'small',
                                        ghost: true
                                    },
                                    style: {
                                        marginRight: '5px',
                                        color: '#2d8cf0',
                                        display:(this.editButton === true)?'inline-block':'none'
                                    },
                                    on: {
                                        click: () => {
                                            this.addEditDetail('edit', params.index)
                                        }
                                    }
                                },
                                '编辑'
                            ),
                            h(
                                'Button', {
                                    props: {
                                        type: 'text',
                                        size: 'small',
                                        ghost: true
                                    },
                                    style: {
                                        marginRight: '5px',
                                        color: '#2d8cf0',
                                        display:(this.detailButton === true)?'inline-block':'none'
                                    },
                                    on: {
                                        click: () => {
                                            this.addEditDetail('details', params.index)
                                        }
                                    }
                                },
                                '详情'
                            )
                        ])
                    }
                }
            ],
            data1: [],
            riskTypeId:''
        }
    },
    created() {

    },
    mounted() {
        this.getButtonStatus();//按钮权限
        this.getUserDefaultProject()
        this.projectGetAll()
        this.dictTypeList('RISK_GRADE')
        this.getRiskType() //获取风险类型
    },
    methods: {
        //获取按钮权限
        getButtonStatus() {
            let path = this.$route.name
            JSON.parse(this.buttonList).forEach((item, index) => {
                if (Object.keys(item)[0] == path) {
                    this.button = item[path];
                }
            })
            this.button.forEach(val => {
                if (val.code == "P_020403_01" || val.code == "P_0205_01") {
                    this.addButton = true;
                } else if (val.code == "P_020403_02" || val.code == "P_0205_02") {
                    this.editButton = true
                } else if (val.code == "P_020403_03" || val.code == "P_0205_03") {
                    this.delButton = true
                } else if (val.code == "P_020403_04" || val.code == "P_0205_04") {
                    this.detailButton = true
                } else if (val.code == "P_020403_05" || val.code == "P_0205_05") {
                    this.importButton = true
                } else if (val.code == "P_020403_06" || val.code == "P_0205_06") {
                    this.searchButton = true
                } else if (val.code == "P_020403_07" || val.code == "P_0205_07") {
                    this.setRiskTypeButton = true
                }
            })
        },
        //默认显示的项目
        getUserDefaultProject() {
            this.$api.UnitProject.userDefaultProject().then(res => {
                if (res.code == 200) {
                    this.parmes.whereMap.projectId = res.data.id
                    this.workstationLedgerList()
                } else {
                    this.$Message.error(res.data.msg)
                }
            })
        },
        checkWbs(data) {
            this.list1 = []
            let objData = data[0]
            if (!!objData.id) {
                let id = data[0].id
                let title = data[0].title
                this.list1.push({
                    id,
                    title
                })

                this.parmes.distEngineeringType = id;
                this.$refs.treeSelectWbs.visible = false

            } else return
        },
        //获取风险类型
        getRiskType() {
            this.$api.WorkstationLedger.riskTypeTree().then(res => {
                if (res.code == 200) {
                    res.data.forEach(item => {
                        item.title = item.name
                        if (item.children.length > 0) {
                            item.children = this.changeRishTypeName(item.children)
                        }
                    })
                    this.treeRiskTypeData = res.data
                    this.treeRiskType = res.data
                } else {
                    this.$Message.warning(res.message)
                }
            })
        },
        changeRishTypeName(data) {
            if (data) {
                let item = data
                const arr = []
                item.forEach(val => {
                    let obj = {}
                    obj.title = val.name
                    obj.id = val.id
                    obj.children = []
                    if (val.children.length > 0) {
                        obj.children = this.changeRishTypeName(val.children)
                    }
                    arr.push(obj)
                })
                return arr
            }
        },
        checkData(data){
            this.treeRiskType = []
            this.parmes.whereMap.riskType = data[0].id
            this.treeRiskType.push({
                id:data[0].id,
                title:data[0].title
            })
            this.$refs.treeRiskType.visible = false
        },
        // 工点列表
        workstationLedgerList() {
            this.$api.WorkstationLedger.workstationLedgerList(this.parmes).then(
                resp => {
                    if (resp.code == 200) {
                        resp.data.resultObject.forEach(item =>{
                            item._checked = false
                        })
                        this.data1 = resp.data.resultObject
                        this.total = resp.data.totalRecord
                    }
                }
            )
        },
        searchWorkstationLedgerList() {
            this.parmes.currentPage = 1;
            this.workstationLedgerList()
        },
        // 分页页码变化
        pageChange(index) {
            this.parmes.currentPage = index
            this.workstationLedgerList()
        },
        //
        onPageSizeChange(size) {
            this.parmes.pageSize = size
            this.workstationLedgerList()
        },
        // （新增、编辑、详情 ）跳转
        addEditDetail(type, index) {
            const id = parseInt(Math.random() * 100000)
            const route = {
                name: type == 'add' ? 'ledger-add' : type == 'edit' ? 'ledger-edit' : 'ledger-detail',
                params: {
                    type: type,
                    id: type == 'add' ? id : this.data1[index].id,
                    name: type == 'add' ?
                        '工点新增' :
                        type == 'edit' ?
                        '工点编辑' :
                        '工点详情'
                }
            }
            this.$router.push(route)
        },

        // 工点表格选择
        onSelect(selection) {
            let selectId = []
            selection.forEach(item =>{
                item._checked = true
                selectId.push(item.id)
            })
            this.data1.forEach(item =>{
                selectId.forEach(sItem =>{
                    if(item.id === sItem){
                        item._checked = true
                    }
                })
            })
            this.tableSelect = selection
        },
        //  删除
        deleteBtn() {
            let checkedData = this.data1.filter(item =>item._checked === true)
            if (checkedData.length <= 0) {
                this.$Message.warning('请选择要删除的数据')
                return false
            } else {
                let relatedFlagArr = checkedData.filter(item =>item.relatedFlag === true)
                if(relatedFlagArr.length>0){
                    this.$Message.warning('部分数据已关联风险信息，不允许删除');
                    this.data1.forEach(item =>{
                        relatedFlagArr.forEach(rItem =>{
                            if(item.id === rItem.id){
                                item._checked = false
                            }
                        })
                    })
                    return
                }
                this.$Modal.confirm({
                    title: '温馨提示',
                    closable: true,
                    content: '确认删除吗？',
                    width: 360,
                    onOk: () => {
                        this.removeClick()
                    }
                })
            }
        },
        removeClick() {
            let recordList = this.tableSelect
            this.$api.WorkstationLedger.ledgerDelete(recordList).then(resp => {
                if (resp.code == 200) {
                    this.$Message.success('删除成功')
                    this.workstationLedgerList()
                } else {
                    this.$Message.warning(resp.message)
                }
            })
        },
        setRiskType(){
            if (this.tableSelect.length <= 0) {
                this.$Message.warning('请选择要设置的数据')
                return false
            } else {
                this.riskTypeModal = true
            }
        },
        checkRiskTypeData(data){
            if(data[0].children && data[0].children.length>0){
                this.$Message.warning('请选择最子级节点！')
            }else{
                this.riskTypeId = data[0].id
            }
        },
        saveRiskType () {
            let idList = []
            this.tableSelect.forEach(item =>{
                idList.push(item.id)
            })
            let params = {
                riskType: this.riskTypeId,
                idList: idList
            }
            this.$api.WorkstationLedger.setRiskType(params).then(resp => {
                if (resp.code == 200) {
                    this.$Message.success(resp.message)
                    this.riskTypeModal = false
                    this.tableSelect = []
                    this.workstationLedgerList()
                } else {
                    this.$Message.warning(resp.message)
                }
            })
        },
        cancel () {
            this.riskTypeModal = false;
        }
    }
}
</script>

<style>
.search-title {
    width: 100%;
    height: 40px;
    line-height: 40px;
    display: block;
}

.page-div {
    padding-top: 20px;
    width: 100%;
    text-align: center;
}
.riskModal .ivu-modal-body{
    height:300px;
    overflow: auto;
}
</style>
